<template>
	<view>
		<view class="search-bar">
			<view class="search-box">
				<image src="/static/search-icon.png" mode="" class="search-icon"></image>
				<input type="text" style="flex: 1;color: #ffffff;" placeholder="请输入文章标题" placeholder-class="search-placeholder" v-model="keyword"/>
				<view class="search-button" @click="searchArticle">搜索</view>
			</view>
		</view>
		<view class="swiper" v-show="swipers.length>0">
			<swiper indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#fae573" :autoplay="autoplay" interval="2000" duration="500" style="height: 400upx;">
				<swiper-item v-for="(item,key) in swipers" :key="key">
					<image :src="item.image" mode="aspectFill" class="swiper-image" @click="onSwiperClick(key)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="recommend-area">
			<view class="recommend">
				<view class="recommend-text">精选推荐</view>
			</view>
			<view class="article" @click="showArticlePage(key)" v-for="(item,key) in recommends" :key="key">
				<image :src="item.thumb" mode="aspectFill" class="article-image"></image>
				<view class="article-detail">
					<view class="article-title">{{item.title}}</view>
					<view class="article-content">{{item.introduction}}</view>
					<view class="label-row"> 
						<view class="label" v-bind:class="colors[index]" v-for="(label,index) in item.labels" :key="index">{{label}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:"",
				recommends: [],
				catalogs:[],
				swipers:[],
				colors: ["green", "amber", "orange", "green", "amber", "orange"],
			};
		},
		onLoad: function() {
			this.getSwipers();
			this.getRecommends();
		},
		onPullDownRefresh: function() {
			this.getSwipers();
			this.getRecommends();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);

		},
		methods: {
			searchArticle:function(){
				uni.navigateTo({
					url: "/pages/article/list/list?keyword=" + this.keyword,
				})
			},
			getSwipers:function(){
				var that = this;
				that.ajax("/index/swiper",{
				},function(res){
					that.swipers=res.data.data;
				});
			},
			getRecommends: function() {
				var that = this;
				that.ajax("/article/recommend",{
				},function(res){
					that.recommends = res.data.data.recommend;
				});
			},
			onSwiperClick: function(index) {
				if (this.swipers[index].type == 1) {
					console.log("打开网页");
					var url ="/pages/article/content/content?url=" + encodeURI(this.swipers[index].value+"/token/"+uni.getStorageSync("token"));
					console.log(url);
					uni.navigateTo({
						url: url
					});
				} else {
					console.log("打开页面");
					uni.navigateTo({
						url: this.swipers[index].value,
					})
				}
			},
			showArticlePage: function(index) {
				this.ajax("/article/click",{
					id: this.recommends[index].id,
				});
				uni.navigateTo({
					url: "/pages/article/content/content?url=" + encodeURI(this.recommends[index].url),
				});

			}
		}

	}
</script>

<style>
	.search-bar{
		background: #478E7E;
		display: flex;
		padding: 16upx 28upx;
		flex-direction: row;
		align-items: center;
	}
	.search-box{
		flex: 1;
		height: 56upx;
		background: rgba(255,255,255,0.58);
		color:#FAFAFA;
		border-radius: 28upx;
		font-size: 24upx;
		line-height: 56upx;
		padding: 0 10upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.search-placeholder{
		color:#FAFAFA;
	}
	.search-button{
		background:#45AA8C;
		height: 48upx;
		color: #ffffff;
		border-radius: 27upx;
		line-height: 48upx;
		padding: 0 20upx;
	}
	.search-icon{
		width: 33upx;
		height: 33upx;
		margin-right: 10upx;
	}
	.swiper {
		height: 400upx;
	}

	.swiper-image {
		width: 100%;
		height: 400upx;
	}

	.tools {
		padding: 30upx;
		background: #FFFFFF;
		box-shadow:0px 2px 22px 0px rgba(43,159,133,0.14);
	}
	.tools-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.tools-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tools-image {
		width: 60upx;
		height: 60upx;
		padding: 14upx;
		border-radius: 44upx;
		box-shadow:0px 4px 24px 0px rgba(18,163,21,0.1);
	}

	.tools-text {
		font-size: 28upx;
		color: #4B4B4B;
		text-align: center;
		margin-top: 15upx;
	}
	.recommend-area{
		background:#ffffff;
		box-shadow:0px 2px 22px 0px rgba(43,159,133,0.14);
		border-radius:4px;
		padding: 32upx 28upx;
		margin-top: 32upx;
	}
	.recommend {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 25upx;
		border:1px dashed #478E7E;
		width:222upx;
		height:50upx;
	}

	.recommend-text {
		text-align: center;
		background: linear-gradient(to right, #11997E, #6ECE92);
		-webkit-background-clip: text;
		color: transparent;
		font-weight: 500;
		font-size: 28upx;
	}
	.green {
		background: #45AA8C;
	}

	.amber {
		background: #EBBA80;
	}

	.orange {
		background: #FF7465;
	}

	.article {
		background: #FFFFFF;
		margin-top: 35upx;
		box-shadow:0upx 2upx 22upx 0upx rgba(43,159,133,0.14);
		border-radius:18upx;
	}

	.article-image {
		width: 100%;
		height: 352upx;
		border-top-right-radius: 18upx;
		border-top-left-radius: 18upx;
	}

	.article-detail {
		padding: 18upx 22upx;
	}

	.article-title {
		color:#4B4B4B;
		font-size:30upx;
		text-align: center;
	}

	.article-content {
		color: #8B8B8B;
		font-size: 24upx;
		padding: 24upx 0;
	}

	.label-row {
		display: flex;
		flex-direction: row;
	}

	.label {
		color: #FFFFFF;
		font-size: 24upx;
		border-radius: 24upx;
		padding: 3upx 26upx;
		margin-right: 20upx;
	}
</style>
